<template>
  <div class="base-map">
    <el-container>
      <el-main style="margin-left: 0;margin-bottom: 0;position:relative">
        <div id="fullScreenDiv" class="box-card-left">
          <!-- 侧边搜索栏 -->
          <div class="sidebar-map" :style="{height: (windowContent.height) + 'px',left: isCollapse ? '0px' : '-260px'}">
          </div>
          <!--控件-->
          <div v-show="!dialogVisible" style="position: absolute;top:15px;right: 28px;z-index: 999">
            <!--图层-->
            <div class="rightOne" @click="layerOpen" id="layer"
                 @mouseover="layerIconVisible = true" @mouseleave="layerIconVisible = false"
                 style="margin-bottom: 8px;">
              <div class="rightImage">
                <img v-if="!layerVisible && !layerIconVisible" title="图层"
                     src="../../../assets/image/map/map_ctrlLayer.svg" width="100%" height="100%">
                <img v-else title="图层" src="../../../assets/image/map/map_ctrlLayerActive.svg"
                     width="100%" height="100%">
              </div>
            </div>
            <!--测距-->
            <div class="rightOne" @click="lineToolCtrl"
                 @mouseover="distanceIconVisible = true" id="lineTool"
                 @mouseleave="distanceIconVisible = false"
                 style="margin-bottom: 8px;">
              <div class="rightImage">
                <img v-if="!distanceIconVisible && !distanceVisible" title="测距"
                     src="../../../assets/image/map/map_ctrlDistance.svg" width="100%" height="100%">
                <img v-else title="测距" src="../../../assets/image/map/map_ctrlDistanceActive.svg"
                     width="100%" height="100%">
              </div>
            </div>
            <!--复位-->
            <div class="rightOne" @click="mapRest"
                 @mouseover="resetIconVisible = true" @mouseleave="resetIconVisible = false"
                 style="margin-bottom: 8px;">
              <div class="rightImage">
                <img v-if="!resetIconVisible" title="复位"
                     src="../../../assets/image/map/map_ctrlReset.svg" width="100%" height="100%">
                <img v-else title="复位" src="../../../assets/image/map/map_ctrlReset.svg"
                     width="100%" height="100%">
              </div>
            </div>
            <!--全屏-->
            <div class="rightOne" @click="toggleFullScreen" id="fullScreen"
                 @mouseover="fullIconVisible = true" @mouseleave="fullIconVisible = false"
                 style="margin-bottom: 8px;">
              <div class="rightImage">
                <img v-if="!isFullscreen && !fullIconVisible" title="全屏"
                     src="../../../assets/image/map/map_ctrlFull.svg" width="100%" height="100%">
                <img v-else title="全屏" src="../../../assets/image/map/map_ctrlFullActive.svg"
                     width="100%" height="100%">
              </div>
            </div>

          </div>
          <!--图层弹窗-->
          <div style="position: absolute;right: 80px;top: 15px;bottom: 0;height: 116px;width: 424px;z-index: 2000;
                            cursor: pointer;background: rgba(15, 21, 38, 0.8);" v-if="layerVisible" id="layerDiv">
            <div class="layerItems" @click="layerChange(1)">
              <img style="border-radius:5px" :src="layerImageList[0]" width="100%" height="100%">
            </div>
            <div class="layerItems" @click="layerChange(2)">
              <img style="border-radius:5px" :src="layerImageList[1]" width="100%" height="100%">
            </div>
            <div class="layerItems" @click="layerChange(3)">
              <img style="border-radius:5px" :src="layerImageList[2]" width="100%" height="100%">
            </div>
          </div>
          <!--地图-->
          <div id="equipmentTopologyMap" class="equipmentTopologyMap father"
               ref="mapDiv" :style="{ width: '100%',height: windowContent.height + 'px' }">
          </div>
          <!--右下角图例-->
          <div class="mapControlZoom">
            <!--放大-->
            <div class="rightOne" @click="zoomIn()"
                 style="margin-bottom: 0;border-bottom: 1px solid #787D90">
              <div>
                <div style="color: #B7C1DB;text-align: center;font-size: 22px;line-height: 40px;">
                  +
                </div>
              </div>
            </div>
            <!--缩小-->
            <div class="rightOne" @click="zoomOut()" style="margin-bottom: 8px;">
              <div>
                <div style="color: #B7C1DB;text-align: center;font-size: 22px;line-height: 40px;">
                  -
                </div>
              </div>
            </div>
          </div>
          <!--右侧抽屉-->
          <el-drawer
            :append-to-body="false"
            :close-on-click-modal="true"
            :destroy-on-close="true"
            :modal="false"
            direction="rtl"
            :show-close="true"
            size="40%"
            :visible.sync="dialogVisible"
            custom-class="mapeldrawer">
            <!--   插槽,可用作展示设备详情         -->
            <slot name="drawerView"></slot>
          </el-drawer>
        </div>
        <!--   左下角图例     -->
        <div class="mapLegend">
          <div class="bottom_right_f_l">
            <div class="bottom_right_f_lc"><img class="img" src="../../../assets/image/map/green.png">正常</div>
            <div class="bottom_right_f_lc"><img class="img" src="../../../assets/image/map/red.png">报警</div>
            <div class="bottom_right_f_lc"><img class="img" src="../../../assets/image/map/yellow.png">故障</div>
            <div class="bottom_right_f_lc"><img class="img" src="../../../assets/image/map/gery.png">离线</div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import $ from 'jquery';
import {getMarkerInfo} from '@/api/common/common'
import {loadMap, loadMapUI} from '@/utils/loadMap'
let AMapObj, placeSearch, marker, geocoder;
export default {
  name: "map-view",
  props: {
    type: { // 电子地图类型
      type: String,
      required: false
    },
    legendList: { // 左下角的图例信息
      type: Array,
      required: false
    },
    zoom: {
      type: Number,
      default: 10
    },
    zooms: {
      type: Array,
      default: function () {
        return [4, 18]
      }
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      windowContent: {
        width: 0,
        height: 0,
        chartHeight: 0
      },
      layerImageList: [ // 图层类型
        require("../../../assets/image/map/vector.png"),
        require("../../../assets/image/map/satellitepoi.png"),
        require("../../../assets/image/map/blue.png")
      ],
      layerVisible: false,
      layerIconVisible: false, // 图层相关
      distanceVisible: false,
      distanceIconVisible: false, // 测距相关
      resetIconVisible: false, // 复位相关
      isFullscreen: false,
      fullIconVisible: false, // 全屏相关
      labelsLayer: {},
      dialogVisible: false,// 右侧抽屉是否展示
      mapObj: { // 地图基本配置信息
        mapEl: null,
        zoom: 16,
        center: [],
        markersCluster: null, // 聚合点标注对象
        markersClusterArray: [], // 聚合点标注数组
        labelArray: [], // 文字标注
        showLabelArray: false,
        overlayGroup: null, //
        lineTool: null, // 测距工具
        infoWindow: null, // 信息窗体
        layer: {
          tileLayer: null, // 基础图层
          satellite: null // 卫星图
        }
      },
      markerOptions: {
        url: null, // 打点需要调用的接口地址
        params: {}, // 接口查询条件
        legendData: { // 图例信息
          domeCameras: true, //  1球机
          remoteControl: true, // 4遥控枪机
          halfDomeCameras: true, // 2半球机
          fixedCameras: true, // 3固定枪机
          offLine: true, // 离线
          yuntai: true, // 云台
          contentAlarm: true, // 内容告警
          deviceAlarm: true // 设备告警
        },
      },
      isCollapse: true
    }
  },
  watch: {
    'layerVisible': function () { // 监听控件点击，切换背景
      let layer = document.getElementById("layer");
      if (this.layerVisible) {
        layer.style.backgroundColor = "#0c95ff";
      } else {
        layer.style.backgroundColor = null;
      }
    },
    'isFullscreen': function () { // 监听控件点击，切换背景
      let fullScreen = document.getElementById("fullScreen");
      if (this.isFullscreen) {
        fullScreen.style.backgroundColor = "#0c95ff";
      } else {
        fullScreen.style.backgroundColor = null;
      }
    },
  },
  mounted() {
    Object.assign(this.markerOptions, this.options);
    // 加载地图
    this.loadMap();
    // 初始化长宽
    this.initWidthAndHeight();
    // 新增监听
    this.addFullScreenListener();
  },
  // unmounted() {
  //   this.map?.destroy();
  // },
  methods: {
    // 加载地图
     loadMap() {
      // 初始化map对象，并自定义一些基础配置
       this.initAMapSetting();
      // 进行打点
    },
    // 初始化
    initAMapSetting() {
      let that = this;
      // AMapLoader.reset();
      // AMapLoader.load({
      //   key: "22dae2faf54b7b62fea686c5f4a53b31", // 申请好的Web端开发者Key，首次调用 load 时必填
      //   plugins: ["AMap.DistrictSearch", "AMap.OverlayGroup",
      //     "AMap.RangingTool", "AMap.MarkerCluster"],
      //   AMapUI: {
      //     version: "1.1", // AMapUI 版本
      //   },
      //   version: "2.0" // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // })
      loadMap('22dae2faf54b7b62fea686c5f4a53b31').then((AMap) => {
        loadMapUI().then((AMapUI)=> {
          AMapObj = AMap;
          that.mapObj.mapEl = new AMap.Map("equipmentTopologyMap", {
            // 设置地图容器id
            mapStyle: 'amap://styles/normal', // 设置地图的显示样式
            viewMode: '2D', // 设置地图模式
            lang: 'zh_cn', // 设置地图语言类型
            zooms: that.zooms, // 缩放范围
            zoom: that.zoom, // 初始化地图级别
            center: [112.427428, 34.90923], // 初始化地图中心点位置
          });
          // 卫星图注册
          that.mapObj.layer.satellite = new AMap.TileLayer.Satellite({
            map: that.mapObj.mapEl
          });
          // 设置边境线
          new AMap.DistrictSearch({
            extensions: 'all',
            level: 'country',
            subdistrict: 0
          }).search('中国', function (status, result) {
            // 外多边形坐标数组和内多边形坐标数组
            let outer = [
              // eslint-disable-next-line no-undef
              new AMap.LngLat(-360, 90, true),
              // eslint-disable-next-line no-undef
              new AMap.LngLat(-360, -90, true),
              // eslint-disable-next-line no-undef
              new AMap.LngLat(360, -90, true),
              // eslint-disable-next-line no-undef
              new AMap.LngLat(360, 90, true)
            ];
            let holes = result.districtList[0].boundaries
            let pathArray = [outer];
            pathArray.push.apply(pathArray, holes)
            let polygon = new AMap.Polygon({
              pathL: pathArray,
              strokeColor: '#e04747',
              strokeWeight: 1,
              fillColor: '',
              fillOpacity: 0.5
            });
            polygon.setPath(pathArray);
            that.mapObj.mapEl.add(polygon)
          })
          // 各个省份的分界线
          new AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
            // 创建一个实例
            let districtExplorer = new DistrictExplorer({
              map: that.mapObj.mapEl
            });
            districtExplorer.loadAreaNode(100000, function (error, areaNode) {
              districtExplorer.renderSubFeatures(areaNode, function (feature, i) {
                return {
                  bubble: true,
                  strokeColor: "#B5B5B5", // 线颜色
                  strokeOpacity: 1, // 线透明度
                  strokeWeight: 0.6, // 线宽
                  fillColor: null, // 填充色
                  fillOpacity: 0.35 // 填充透明度
                };
              });
            });
          });
          // 多个种类要素显示
          that.mapObj.mapEl.setFeatures(['bg', 'building', 'point']);
          // 默认展示图层第一个
          that.layerChange(1)
          // 创建标注工具对象（用于测距）
          // eslint-disable-next-line no-undef
          that.mapObj.lineTool = new AMap.RangingTool(this.mapObj.mapEl);
          // 新增地图缩放等级变化监听
          that.mapObj.mapEl.on('zoomchange', function (e) {
            let zoom = that.mapObj.mapEl.getZoom();
            if (zoom < 18 && that.mapObj.infoWindow != null && that.mapObj.infoWindow.getIsOpen()) {
              that.mapObj.infoWindow.close();
            }
          });
          that.initMapContent(this.markerOptions.params);
        })
      }).catch((e) => {
        console.log(e);
      });
    },
    // 初始化高度和宽度
    initWidthAndHeight() {
      this.windowContent.height = $(window).height() - 115;
      this.windowContent.chartHeight = Number(this.windowContent.height - 6) / 3;
      this.windowContent.width = $(window).width();
    },
    // 图层方法，打开图层切换抽屉
    layerOpen(e) {
      let that = this;
      if (this.layerVisible) {
        this.layerVisible = false;
        this.stopBubble(e)
      } else {
        this.layerVisible = true
        this.stopBubble(e)
      }
    },
    stopBubble(e) {
      if (e && e.stopPropagation) {
        e.stopPropagation();
      } else {
        window.event.cancelBubble = true;
      }
    },
    // 全屏方法
    toggleFullScreen(e) {
      if (!this.isFullscreen) {
        this.FullScreen(document.getElementById("fullScreenDiv"));
      } else {
        this.exitFullscreen();
      }
      this.isFullscreen = !this.isFullscreen;
    },
    // 进入全屏方法
    FullScreen(el) {
      if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
      } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullscreen();
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      } else if (el.requestFullscreen) {
        el.requestFullscreen();
      }
      let that = this;
      that.windowContent.height = screen.height;
    },
    // 退出全屏方法
    exitFullscreen() {
      if (document.exitFullScreen) {
        document.exitFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    // 监听屏幕变化事件
    addFullScreenListener() {
      let _that = this;
      // 监听全屏 退出全屏事件，适配浏览器
      document.addEventListener("fullscreenchange", () => {
        if (document.fullscreen === false) {
          this.isFullscreen = false;
          _that.initWidthAndHeight();
        }
      });
      document.addEventListener("mozfullscreenchange", () => {
        if (document.mozFullScreen === false) {
          this.isFullscreen = false;
          _that.initWidthAndHeight();
        }
      });
      document.addEventListener("webkitfullscreenchange", () => {
        if (document.webkitIsFullScreen === false) {
          this.isFullscreen = false;
          _that.initWidthAndHeight();
        }
      });
      document.addEventListener("msfullscreenchange", () => {
        if (document.msFullscreenElement === false) {
          this.isFullscreen = false;
          _that.initWidthAndHeight();
        }
      });
    },
    // 图层切换具体方法
    layerChange(e) {
      this.layerVisible = false;
      if (e === 1) {
        this.mapObj.layer.satellite.hide();
        this.mapObj.mapEl.setMapStyle('amap://styles/normal');
      } else if (e === 2) {
        this.mapObj.layer.satellite.show();
        this.mapObj.mapEl.setMapStyle('amap://styles/normal');
      } else {
        this.mapObj.layer.satellite.hide();
        this.mapObj.mapEl.setMapStyle('amap://styles/blue');
      }
    },
    // 测距方法
    lineToolCtrl() {
      let lineTool = document.getElementById("lineTool");
      if (!this.distanceVisible) {
        lineTool.style.backgroundColor = "#0c95ff";
        this.mapObj.lineTool.turnOn();
      } else {
        lineTool.style.backgroundColor = null;
        this.mapObj.lineTool.turnOff();
      }
      this.distanceVisible = !this.distanceVisible;
    },
    // 复位按钮，点击重置map数据
    mapRest() {
      // 复位图例
      for (let item in this.markerOptions.legendData) {
        this.markerOptions.legendData[item] = true;
        let cssObj = ".bottom_right_f_" + item;
        $(cssObj).css("color", "#CBD2E9");
      }
      this.resetMap();
    },
    // 地图重置
    resetMap() {
      let that = this;
      if (that.mapObj.markersCluster) {
        that.mapObj.markersCluster.clearMarkers(); // 从地图上彻底清除所有覆盖物标记
        that.mapObj.mapEl.clearMap(); // 从地图上彻底清除所有聚合点标记
      }
      this.loadMarkerCluster();
      that.mapObj.mapEl.setFitView(that.mapObj.markersClusterArray); // 自动缩放地图到合适的视野级别
    },
    // 放大地图
    zoomIn() {
      this.mapObj.mapEl.zoomIn();
    },
    // 缩小地图
    zoomOut() {
      this.mapObj.mapEl.zoomOut();
    },
    initMapContent(params) {
      let that = this;
      // 搜索数据重置
      let arrayObj = []; // 聚合点
      // 获取所有设备
      // getMarkerInfo(this.markerOptions.url, params).then((response) => {
      // 清空map,初始数据
      if (that.mapObj.markersCluster) {
        that.mapObj.markersCluster.clearMarkers(); // 从地图上彻底清除所有覆盖物标记
        that.mapObj.mapEl.clearMap(); // 从地图上彻底清除所有聚合点标记
      }
      that.mapObj.labelArray = [];
      that.mapObj.markersClusterArray = [];
      let overlayGroup = new AMapObj.OverlayGroup();
      // let data = response.data;
      let data = [
        {
          lng: '112.437428',
          lat: '35.90923',
          devName: '测试设备1',
          title: '测试设备1',
          devCode: 'SADWEIFD12',
          deviceId: '123124'
        },
        {
          lng: '112.431428',
          lat: '34.12923',
          devName: '测试设备2',
          title: '测试设备2',
          devCode: 'SADWEIFD12',
          deviceId: '123124'
        }
      ]
      for (let i = 0; i < data.length; i++) {
        let obj = data[i];
        // 必须有经纬度才可以展示
        if ((obj.lat !== "" && obj.lng !== "") && obj.lng !== "null" && obj.lat !== "null" && obj.lat <= 90 && obj.lat >= -90 && obj.lng <= 180 && obj.lng >= -180) {
          // 主要是展示图标和点击事件
          let options = {
            drwFlag: (obj.drwFlag === 0 ? 1 : 0), // 设备状态 1 在线 0离线
            devClass: (obj.devClass == null ? 3 : Number(obj.devClass)), // 设备类型
            alarmType: obj.alarmType, // 业务告警类型
            issueType: obj.issueType, // 设备告警类型
            devName: obj.devName,
            title: obj.devName,
            id: obj.id,
            devCode: obj.devCode,
            deviceId: obj.deviceId,
            parentId: obj.parentId
          };
          // 拼接图标地址
          that.makeUpIconImageUrl(obj);
          // =============================================
          // 创建地图覆盖物
          // 创建 AMap.Icon 实例：
          let icon = new AMapObj.Icon({
            size: new AMapObj.Size(45, 45), // 图标尺寸
            image: obj.icon, // Icon的图像
            imageOffset: new AMapObj.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMapObj.Size(45, 45) // 根据所设置的大小拉伸或压缩图片
          });
          let iconOption = {
            iconPath: obj.icon,
            lng: obj.lng,
            lat: obj.lat,
            icon: icon,
            title: obj.devName, // 设备名称
            id: obj.id, // 系统ID
            devCode: obj.devCode, // 设备编码
            deviceId: obj.deviceId, // 设备ID
            status: obj.status, // 设备状态 1 在线 0 离线
            devClass: obj.devClass, // 设备类型
            alarmType: obj.alarmType, // 业务告警类型数量
            parentId: options.parentId
          }
          let marker = new AMapObj.Marker({
            position: [obj.lng, obj.lat],
            anchor: "bottom-center", // 偏移量配置方式
            // eslint-disable-next-line no-undef
            offset: new AMap.Pixel(0, 0),
            icon: icon,
            extData: iconOption,
            title: obj.devName
          });
          // eslint-disable-next-line
          marker.on("click", function (e) {
            // let options = e.target.Ce.extData;
            let options = e.target.getExtData();
            // 平移有问题
            that.mapObj.mapEl.setCenter([options.lng, options.lat]);
            that.showDialog(options);
          }); // 增加点击事件
          overlayGroup.addOverlay(marker); // 创建海量点
          let title = options.title // 你要处理的字符串
          if (title.length > 10) { // 如果字符长度超过10，后面的字符就变成...可自行调整长度和代替字符
            title = title.substr(0, 10) + "..." // 截取从第一个字符开始，往后取10个字符，剩余的用...代替
          }
          let text = {
            // 要展示的文字内容
            content: title,
            // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
            direction: 'right',
            // 在 direction 基础上的偏移量
            offset: [25, -15],
            style: {
              'margin-bottom': '0rem',
              'borderRadius': '0.25rem',
              'backgroundColor': 'DarkSlateGray',
              'width': '80',
              'borderWidth': 0,
              'boxShadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
              'text-align': 'center',
              'fontSize': '12',
              'fontWeight': 'normal',
              'fillColor': 'white'
            }
          };
          let labelMarker = {
            name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
            position: [obj.lng, obj.lat],
            zIndex: 16,
            text: text
          };
          that.mapObj.labelArray.push(labelMarker); // 存储文字标注数据
        } else {
          console.log(obj);
        }
      }
      that.mapObj.markersClusterArray = overlayGroup.getOverlays() // 存储聚合点数据
      that.loadMarkerCluster(); // 对数据进行聚合
      // })
    },
    // （聚合）新增聚合点图片标注
    loadMarkerCluster(devCode) {
      // console.time('聚合')
      let clusterArray = [];
      // 根据图例，控制增加设备的类型
      if (devCode) {
        for (let index in this.mapObj.markersClusterArray) {
          let option = this.mapObj.markersClusterArray[index].getExtData();
          if (devCode) { // 如果传值进来，则只展示有值的数据
            if (option.devCode.indexOf(devCode) != -1 || option.title.toLowerCase().indexOf(devCode.toLowerCase()) != -1) {
              clusterArray.push(this.mapObj.markersClusterArray[index]);
              this.mapObj.mapEl.panTo(new AMap.LngLat(option.lng, option.lat));
              break;
            }
          }
        }
      } else {
        clusterArray = this.mapObj.markersClusterArray
      }

      let count = clusterArray.length;
      let _renderClusterMarker = function (context) {
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
        div.style.backgroundColor = '#008CFF';
        // var size = Math.round(45 + Math.pow(context.count / count, 1 / 5) * 50);
        var size = Math.round(45 + Math.pow(context.count / count, 1 / 5) * 100);
        div.style.width = div.style.height = size + 'px';
        div.innerHTML = context.count;
        div.style.lineHeight = (size * 0.65) + 'px';
        div.style.color = 'white';
        div.style.fontSize = '14px';
        div.style.textAlign = 'center';
        let BASE_URL = process.env.BASE_URL == "/" ? "" : process.env.BASE_URL;
        let backgroundUrl = BASE_URL + "/image/map/layer/biaoshidian.png";
        div.style.background = "url('" + backgroundUrl + "') no-repeat center ";
        div.style.backgroundSize = 'contain';
        context.marker.setOffset(new AMapObj.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div)
      };
      // eslint-disable-next-line
      let markerCluster = new AMapObj.MarkerClusterer(this.mapObj.mapEl, [],
        {
          // styles: sts,
          gridSize: 80,
          renderClusterMarker: _renderClusterMarker
        });
      markerCluster.addMarkers(clusterArray);
      // markerCluster.setMaxZoom(15); // 设置最大聚合点数
      this.mapObj.markersCluster = markerCluster;
      this.mapObj.markersCluster.on('click', this.markersClick);
    },
    // 标注点基本点击事件方法
    markersClick(e) {
      let that = this;
      let zoom = that.mapObj.mapEl.getZoom();
      if (zoom >= 18) {
        that.openInfo(e.lnglat, e.markers);
      }
    },
    // 在指定位置打开信息窗体
    openInfo(lnglat, markers) {
      let that = this;
      // 构建信息窗体中显示的内容
      let info = [];
      info.push("<style>" +
        "    .left-content{\n" +
        "        width: 240px;\n" +
        "        height: 140px;\n" +
        "        overflow: auto;\n" +
        "        color: #fff;\n" +
        "        font-size: 12px;\n" +
        "        background: rgba(15, 21, 38, 0.8);\n" +
        "        border-radius: 2px;\n" +
        "        box-shadow: 0px 0px 7px 0px rgba(44,123,229,0.6000), inset 0px -1px 0px 0px #3C4251;\n" +
        "    }\n" +
        "    /*滚动条高宽度*/\n" +
        "    .left-content::-webkit-scrollbar{\n" +
        "        width: 8px;\n" +
        "        height: 4px;\n" +
        "    }\n" +
        "    /*滚动条滑块*/\n" +
        "    .left-content::-webkit-scrollbar-thumb{\n" +
        "        border-radius: 3px;\n" +
        "        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);\n" +
        "        background: rgba(15, 21, 38, 1);\n" +
        "    }\n" +
        "    /*滚动条里面轨道*/\n" +
        "    .left-content ::-webkit-scrollbar-track {\n" +
        "        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;\n" +
        "\n" +
        "    }\n" +
        "    /*滚动条的小边角*/\n" +
        "    .left-content::-webkit-scrollbar-corner {\n" +
        "        background: transparent;\n" +
        "    }" +
        ".div-item:hover{\n" +
        "\tbackground: #2C334F;\n" +
        "\tcolor: white!important;\n" +
        "}" +
        "</style>");
      info.push("<div class='left-content'>");
      for (let index in markers) {
        // let option = markers[index].Ce.extData;
        let option = markers[index].getExtData();
        info.push(`<div onclick="getLen(${option.id})"
                        class='div-item' style='width: 100%;height: 30px;padding:0px 5px;border-bottom:1px solid rgba(255,255,255,0.6);'>
                            <div style="line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${option.title}</div>
                        </div>`);
      }
      info.push("</div>");
      // 函数内的事件
      window.getLen = (optionid) => {
        // let options = vm.mapObj.markersClusterArray.find(item => item.w.extData.devCode == devCode).getExtData();
        that.mapObj.markersClusterArray.forEach(item => {
          let obj = item.getExtData()
          if (obj.id == optionid) {
            that.showDialog(obj);
          }
        });
        // console.log(vm.mapObj.markersClusterArray,'vm.mapObj.markersClusterArray');
      }
      // eslint-disable-next-line no-undef
      that.mapObj.infoWindow = new AMapObj.InfoWindow({
        content: info.join(""), // 使用默认信息窗体框样式，显示信息内容
        isCustom: true,
        anchor: 'bottom-center',
        closeWhenClickMap: true
      });
      that.mapObj.infoWindow.open(that.mapObj.mapEl, lnglat);
    },
    // 打开设备信息弹窗
    showDialog(options) {
      this.dialogVisible = true;
      this.vloading = true;
      new Promise((resolve, reject) => {
        setTimeout(() => {
          this.vloading = false;
          resolve()
          // 失败的时候调用reject
          // reject('error message')
        }, 200)
      }).then(() => {
        this.$refs.dialogDetail.init(options);
      }).catch((err) => {
        console.log(err);
      })
    },
    // 组合标注图片地址
    makeUpIconImageUrl(options) {
      // let imageUrl = "map";
      // let devTypeList = ["_Qiuji", "_Banqiu", "_Guding", "_Yaokong"];
      // // 设备类型
      // if (options.devClass && Number(options.devClass) > 0) {
      //   imageUrl = imageUrl + devTypeList[Number(options.devClass) - 1];
      // } else {
      //   imageUrl = imageUrl + devTypeList[2];
      // }
      // // 内容告警类型
      // if (Number(options.alarmType) > 0) {
      //   imageUrl = imageUrl + "_Neirong";
      // }
      // // 设备告警类型
      // if (Number(options.issueType) > 0) {
      //   imageUrl = imageUrl + "_Shebei";
      // }
      // // 云台
      // if (options.yunTaiFlag == 1) {
      //   imageUrl = imageUrl + "_Yuntai";
      // }
      // // 离线
      // if (options.drwFlag == 0) {
      //   imageUrl = imageUrl + "_Lixian";
      // }
      let BASE_URL = process.env.BASE_URL == "/" ? "" : process.env.BASE_URL;
      options.icon = BASE_URL + "" + '/images/blue-marker' + ".svg";
    },
    // 所有需要重新绘制覆盖物和图片标注的，都可以调用这个方法
    rebuildMarkers() {
      console.log("重新绘制覆盖物");
      this.mapObj.markersCluster.clearMarkers(); // 从地图上彻底清除所有覆盖物标记
      this.mapObj.mapEl.clearMap(); // 从地图上彻底清除所有覆盖物标记
      if (this.searchDevCode) {
        // 新增指定覆盖物
        this.loadMarkerCluster(this.searchDevCode);
      } else {
        // 新增所有覆盖物标注
        this.loadMarkerCluster();
      }
    },
    // 图例多选框选择回调
    checksChange(e) {
      for (let key in this.markerOptions.legendData) {
        // 更改图例样式
        let cssObj = ".bottom_right_f_" + key;
        if (this.markerOptions.legendData[key]) {
          $(cssObj).css("color", "#CBD2E9");
        } else {
          $(cssObj).css("color", "grey");
        }
      }
      // 去除所有标注后，重新按要求打点
      this.rebuildMarkers();
    }
  }
}
</script>
<style scoped>
@import '../../../assets/styles/MapGDV3.css';

.main-content {
  padding: 2px !important;
  height: 100%;
  background: #1C1F28;
}

.el-container {
  height: 100%;
}

.sidebar-map {
  width: 250px;
  padding-bottom: 2px;
  top: 0px;
  position: absolute;
  z-index: -100;
  background-color: rgba(15, 21, 38);
}

.el-drawer__wrapper {
  top: 82px;
  z-index: 100 !important;
}

.el-drawer {
  background-color: rgba(15, 21, 38, 0.8);
  overflow: auto;

  .el-drawer__header {
    border-bottom: none;
    height: 50px;
  }

  .el-drawer__close-btn {
    color: #fff;
    margin-top: 5px;
  }
}


::v-deep .amap-logo {
  display: none !important;;
}

::v-deep .amap-copyright {
  bottom: -100px;
  display: none !important;;
}
</style>

